import Vue from 'vue';
import ElementUI from 'element-ui';
//import 'element-ui/lib/theme-chalk/index.css';
import '../globalpro/js/css.js';
import './css/basic.css';

Vue.use(ElementUI, {
	  size: 'small',
	  menuType: 'text'
	})

const elementSelected = undefined;
const elementSelectedParas = undefined;
const elementIteraterStack = [];
const block = true;
const elementSelectedDom = undefined;

//element-ui base and container
const elrow = Vue.extend({
  template : '<el-row style="width:90%;height:60px;float:left;" class="yelementcontainer"></el-row>'
})

const elcol = Vue.extend({
	template : '<el-col v-bind:span="4" style="height:60px;"><div class="yelementcontainer" style="height: 60px;"></div></el-col>'
})

const elbutton = Vue.extend({
	template : '<div style="float:left;margin:0px 5px 0px 0px;" class="yelement"><el-button style="width:100%;height:100%;">按钮</el-button></div>'
});

const elbuttonprint = Vue.extend({
	template : '<div style="float:left;margin:0px 5px 0px 0px;" class="yelement"><el-button style="width:100%;height:100%;" icon="el-icon-printer" type="warning" v-on:click="print">打印</el-button></div>'
});

const elicon =  Vue.extend({
	template : '<i style="float:left;margin:0px 5px 0px 0px;" class="el-icon-info yelement"></i>'
});

const elheadermaincontainer = Vue.extend({
  template : '<el-container style="width:100%;height:100%;" class="yfcontainer">'+
      '<el-header class="yfcontainer"></el-header>'+
      '<el-main class="yfcontainer"></el-main>'+
      '</el-container>'
}); 

const elheadermainfootercontainer = Vue.extend({
  template : '<el-container style="width:100%;height:100%;" class="yfcontainer">'+
      '<el-header class="yfcontainer"></el-header>'+
      '<el-main class="yfcontainer"></el-main>'+
      '<el-footer class="yfcontainer"></el-footer>'+
      '</el-container>'
});

const elasidemaincontainer = Vue.extend({
  template : '<el-container style="width:100%;height:100%;"class="yfcontainer">'+
      '<el-aside style="width:20%;height:100%;" class="yfcontainer"></el-aside>'+
      '<el-main style="width:100%;height:100%;" class="yfcontainer"></el-main>'+
      '</el-container>'
});

const elheaderasidemaincontainer = Vue.extend({
  template : '<el-container style="width:100%;height:100%;" class="yfcontainer">'+
        '<el-header class="yfcontainer"></el-header>'+
        '<el-container style="width:100%;height:100%;" class="yfcontainer">'+
          '<el-aside style="width:20%" class="yfcontainer"></el-aside>'+
          '<el-main style="width:80%" class="yfcontainer"></el-main>'+
        '</el-container>'+
      '</el-container>'
});

const elheaderasidemainfootercontainer = Vue.extend({
  template : '<el-container style="width:100%;height:100%;" class="yfcontainer">'+
               '<el-header class="yfcontainer"></el-header>'+
               '<el-container style="width:100%;height:100%;" class="yfcontainer">'+
                  '<el-aside style="width:20%" class="yfcontainer"></el-aside>'+
                  '<el-container class="yfcontainer">'+
                    '<el-main class="yfcontainer"></el-main>'+
                    '<el-footer class="yfcontainer"></el-footer>'+
                  '</el-container>'+
              '</el-container>'+
            '</el-container>'
});

const elasideheadermaincontainer = Vue.extend({
  template : '<el-container style="width:100%;height:100%;" class="yfcontainer">'+
      '<el-aside style="width:20%" class="yfcontainer"></el-aside>'+
      '<el-container class="yfcontainer">'+
        '<el-header class="yfcontainer"></el-header>'+
        '<el-main class="yfcontainer"></el-main>'+
      '</el-container>'+
      '</el-container>'
});

const elasideheadermainfootercontainer = Vue.extend({
  template : '<el-container style="width:100%;height:100%;" class="yfcontainer">'+
      '<el-aside style="width:20%" class="yfcontainer"></el-aside>'+
      '<el-container class="yfcontainer">'+
        '<el-header class="yfcontainer"></el-header>'+
        '<el-main class="yfcontainer"></el-main>'+
        '<el-footer class="yfcontainer"></el-footer>'+
      '</el-container>'+
      '</el-container>'
});

const elcontainer = Vue.extend({
  template : '<el-container direction="vertical" style="width:75%;height:75%;" class="ycontainer"></el-container>'
});

const elheader = Vue.extend({
  template : '<el-header style="width:100%;height:60px;" class="ycontainer"></el-header>'
});

const elmain = Vue.extend({
  template : '<el-main class="ycontainer" style="width:75%;height:75%;"></el-main>'
});

const elfooter = Vue.extend({
  template : '<el-footer style="width:100%;height:60px;" class="ycontainer"></el-footer>'
});

const elaside = Vue.extend({
  template : '<el-aside style="height:75%;width:300px;" class="ycontainer"></el-aside>'
});

//element-ui form
const elinput = Vue.extend({
  template: '<el-input style="width:240px;float:left; margin:0px 5px 0px 0px;"  class="yelement" placeholder="请输入内容" v-bind:clearable="true"></el-input>'
});

const elautocomplete = Vue.extend({
	  template: '<el-autocomplete style="width:240px;float:left; margin:0px 5px 0px 0px;"  class="yelement inline-input" placeholder="请输入内容" v-bind:clearable="true"></el-autocomplete>'
});

const elradio = Vue.extend({
  template : '<el-radio style="float:left;margin:0px 5px 0px 0px;" class="yelement">备选项</el-radio>'
});

const elradiogroup = Vue.extend({
  template : '<el-radio-group style="float:left;margin:0px 5px 0px 0px;width:300px;height:50px;" size="small" class="yelementcontainer"></el-radio-group>'
});

const elradiobutton = Vue.extend({
  template : '<el-radio-button style="float:left;margin:0px 5px 0px 0px;" label="radio button" class="yelement"></el-radio-button>'
});

const elcheckbox = Vue.extend({  // this element's id must be exist to void unexpected id missing problem
  template : '<el-checkbox style="float:left;margin:0px 5px 0px 0px;" id="" class="yelement">备选项</el-checkbox>'
});

const elcheckboxgroup = Vue.extend({
  template : '<el-checkbox-group style="float:left;margin:0px 5px 0px 0px;width:300px;height:50px;" class="yelementcontainer"></el-checkbox-group>'
});

const elcheckboxbutton = Vue.extend({
  template : '<el-checkbox-button style="float:left;margin:0px 5px 0px 0px;" class="yelement">备选按钮</el-checkbox-button>'
});

const elinputnumber = Vue.extend({
  //template : '<div style="float:left;margin:0px 5px 0px 0px;" class="yelement"><el-input-number></el-input-number></div>'
	template : '<div style="float:left;margin:0px 5px 0px 0px;" class="yelement"><el-input-number style="width:100%;"></el-input-number></div>'
});

const elselect = Vue.extend({
	template : '<el-select style="float:left;margin:0px 5px 0px 0px;" placeholder="请选择" class="yelement" v-bind:clearable="true" v-bind:filterable="true"><el-option></el-option></el-select>'
});

const elcascader = Vue.extend({
	template : '<el-cascader style="float:left;margin:0px 5px 0px 0px;" class="yelement" v-bind:clearable="true" v-bind:filterable="true"></el-cascader>'
});

const eloptiongroup = Vue.extend({
	template : '<el-option-group></el-option-group>'
});

const eloption = Vue.extend({
	template : '<el-option></el-option>'
});

const eltimeselect = Vue.extend({
	template : '<el-time-select style="float:left;margin:0px 5px 0px 0px;" placeholder="选择时间" class="yelement" v-bind:clearable="true"></el-time-select>'
});

const eltimepicker = Vue.extend({
	template : '<el-time-picker style="float:left;margin:0px 5px 0px 0px;" placeholder="选择时间" class="yelement" v-bind:clearable="true"></el-time-picker>'
});

const eldatepicker = Vue.extend({
	template : '<el-date-picker style="float:left;margin:0px 5px 0px 0px;" placeholder="选择日期时间" type="datetime" class="yelement" v-bind:clearable="true"></el-date-picker>'
});

const elswitch = Vue.extend({
	template : '<el-switch style="float:left;margin:0px 5px 0px 0px;" active-color="#13ce66" inactive-color="#ff4949" class="yelement"></el-switch>'
});

const elupload = Vue.extend({
	template : '<el-upload v-bind:drag="true" v-bind:multiple="true" style="float:left;margin:0px 5px 0px 0px;" class="yelement" action="action">'+
  '<i class="el-icon-upload"></i>'+
  '<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>'+
  '<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>'+
  '</el-upload>'
});

const elcolorpicker = Vue.extend({
	template : '<el-color-picker style="float:left;margin:0px 5px 0px 0px;" class="yelement"></el-color-picker>'
})

const eltransfer = Vue.extend({
	template : '<el-transfer style="float:left;margin:0px 5px 0px 0px;" class="yelement"></el-transfer>'
})

const elform = Vue.extend({
	template : '<el-form style="float:left;margin:7px 0px 0px 0px;width:100%;height:400px;" label-width="80px" class="yelementcontainer"><el-form-item style="float:left;margin:0px 5px 0px 0px;width:340px;" label="form item" class="yelementcontainer"></el-form-item></el-form>'
});

// el-form-item 无法单独编译  必须依托于 el-form
const elformitem = Vue.extend({
  template : '<el-form-item style="float:left;margin:0px 5px 0px 0px;width:340px;" label="form item" class="yelementcontainer"></el-form-item>'
});

//element-ui data
const eltable = Vue.extend({
  template : '<el-table style="width:100%;float:left;margin:0px 5px 0px 0px;" class="yelement" v-bind:border="true" v-bind:stripe="true">'+
      ' <el-table-column'+
        ' prop=""'+
        ' align="center"'+
        ' label="field1"'+
        ' width="180">'+
      ' </el-table-column>'+
      ' <el-table-column'+
        ' prop=""'+
        ' align="center"'+
        ' label="field2"'+
        ' width="180">'+
      ' </el-table-column>'+
      ' <el-table-column'+
        ' prop=""'+
        ' align="center"'+
        ' label="field3"'+
        ' width="180">'+
      ' </el-table-column>'+
    ' </el-table>'
});

const eltablecolumn = Vue.extend({
  template : '<el-table-column prop="" label="field2" width="180" class="yelement" align="center"></el-table-column>'
})

const elpagination = Vue.extend({
  template : '<el-pagination style="width:100%;float:left;margin:0px 5px 0px 0px;" class="yelement" layout="sizes,prev, pager, next, jumper, ->, total,slot" v-bind:total="1000"></el-pagination>'
});

const eltree = Vue.extend({
  template : '<el-tree style="float:left;margin:0px 5px 0px 0px;width:20%; height:50%;" class="yelement"></el-tree>'
});

const eltag = Vue.extend({
  template : '<el-tag style="float:left;margin:0px 5px 0px 0px;" class="yelement">标签</el-tag>'
});

const elprogress = Vue.extend({
  template : '<el-progress style="float:left;margin:0px 5px 0px 0px;width:300px;" class="yelement" v-bind:percentage="50"></el-progress>'
});

const elbadge = Vue.extend({
  template : '<el-badge style="float:left;margin:0px 5px 0px 0px;margin-top: 10px;margin-right: 40px;" class="yelement" v-bind:value="10"><el-button size="small" style="width:100%;height:100%;">提示</el-button></el-badge>'
});

//element-ui others
const eldialog = Vue.extend({
  template : '<el-dialog style="float:left;margin:0px 5px 0px 0px;width:100%;height:100%;" title="对话框" v-bind:visible="true" class="yelementcontainer" width="70%"></el-dialog>'
});

const elcard = Vue.extend({
  template : '<el-card style="float:left;margin:0px 5px 0px 0px;width:480px;height:480px;" title="添加卡片" class="yelementcontainer">卡片内容</el-dialog>'
});

const eltooltip = Vue.extend({
  template : '<div style="float:left;margin:0px 5px 0px 0px;" class="yelement"><el-tooltip style="width: 100%; height: 100%;" content="提示文字"><el-button style="width: 100%; height: 100%;">提示</el-button></el-tooltip>'
});

const elpopover = Vue.extend({
  template : '<el-popover content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。" title="标题" trigger="hover" style="float:left;margin:0px 5px 0px 0px;" class="yelementcontainer"><el-button slot="reference" style="width:100%;height:100%;">hover 激活</el-button></el-popover>'
});


const elcarousel = Vue.extend({
  template : '<el-carousel style="float:left;margin:0px 5px 0px 0px;height:350px;width:550px;" class="yelementcontainer"></el-carousel>'
});

const elcarouselitem = Vue.extend({
	template : '<el-carousel-item class="yelementcontainer" name="名称" label="指示文本"></el-carousel-item>'
});

const elcollapse = Vue.extend({
	template : '<el-collapse class="yelementcontainer" style="float:left;margin:0px 5px 0px 0px;height:500px;width:500px;"></el-collapse>'
});

const elcollapseitem = Vue.extend({ //vue无法单独编译
	//template : '<el-collapse-item title="标题"  class="yelement"><div class="yelementcontainer" style="width: 97%; height: 100px;"></div></el-collapse-item>'
});



//element-ui notice
const elalert = Vue.extend({
  template : '<el-alert style="float:left;margin:0px 5px 0px 0px;width:400px;height:65px;" title="成功提示的文案" v-bind:visible="true" class="yelement" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明" v-bind:show-icon="true"></el-alert>'
});

//element-ui navigation
const elmenu = Vue.extend({
  template : '<el-menu style="float:left;margin:0px 5px 0px 0px;width: 200px;min-height: 400px;" class="yelementcontainer"></el-menu>'
});

const elsubmenu = Vue.extend({ //vue无法单独编译
  //template : '<el-submenu index="1" class="yelementcontainer"><template slot="title"><i class="el-icon-location"></i><span slot="title">导航一</span></template></el-submenu>'
});

const elmenuitemgroup = Vue.extend({ //vue无法单独编译
  //template : '<el-menu-item-group title="分组" class="yelementcontainer"></el-menu-item-group>'
});

const elmenuitem = Vue.extend({ //vue无法单独编译
  //template : '<el-menu-item index="1" class="yelement">选项</el-menu-item>'
});

const eltabs = Vue.extend({
  template : '<el-tabs style="float:left;margin:0px 5px 0px 0px;width:500px;height:500px;" class="yelementcontainer"></el-tabs>'
});

const eltabpane = Vue.extend({
  template : '<el-tab-pane label="选项卡" class="yelementcontainer"><div class="yelementcontainer" style="width:98%;height:400%;"></div></el-tab-pane>'
});

const elbreadcrumb = Vue.extend({
  template : '<el-breadcrumb separator="/" class="yelementcontainer" style="width:98%;height:20px;float:left;"></el-breadcrumb>'
});

const elbreadcrumbitem = Vue.extend({
  template : '<el-breadcrumb-item class="yelement">导航项</el-breadcrumb-item>'
});

const eldropdown = Vue.extend({
  template : '<el-dropdown class="yelementcontainer" style="float:left;" v-bind:split-button="true">折叠菜单</el-dropdown>'
});

const eldropdownmenu = Vue.extend({
  template : '<el-dropdown-menu class="yelementcontainer" slot="dropdown"><el-dropdown-item class="yelement">折叠菜单项</el-dropdown-item></el-dropdown-menu>'
});

const eldropdownitem = Vue.extend({
  template : '<el-dropdown-item class="yelement">折叠菜单项</el-dropdown-item>'
});

const elsteps = Vue.extend({
	template : '<el-steps class="yelementcontainer" style="float:left;height:150px;width:98%;"></el-steps>'
});

const elstep = Vue.extend({  //vue无法单独编译
	//template : '<el-step class="yelement" title="标题" description="描述性文字">123</el-step>'
});


//basic html element
const div = Vue.extend({
  template : '<div style="width:100%;height:50px;float:left;" class="yelementcontainer"></div>'
});

const span = Vue.extend({
  template : '<span style="float:left;" class="yelement">span</span>'
});

const ul = Vue.extend({
  template : '<ul style="width:240px;height:300px;float:left;" class="yelementcontainer"></ul>'
});

const li = Vue.extend({
  template : '<li class="yelement">li</li>'
});

const h1 = Vue.extend({
  template : '<h1 class="yelement" style="float:left;">h1</h1>'
});

const h2 = Vue.extend({
  template : '<h2 class="yelement" style="float:left;">h2</h2>'
});

const h3 = Vue.extend({
  template : '<h3 class="yelement" style="float:left;">h3</h3>'
});

const h4 = Vue.extend({
  template : '<h4 class="yelement" style="float:left;">h4</h4>'
});

const h5 = Vue.extend({
  template : '<h5 class="yelement" style="float:left;">h5</h5>'
});

const a = Vue.extend({
  template : '<a class="yelement" style="float:left;">超连接</a>'
});

const p = Vue.extend({
  template : '<p class="yelement" style="float:left;">text</p>'
});

const i = Vue.extend({
	  template : '<i class="yelement" style="float:left;">text</i>'
});

const input = Vue.extend({
	  template : '<div class="yelement" style="width:240px;height:40px;float:left;"><input style="width:98%;height:90%;" type="text"></input></div>'
});

const select = Vue.extend({
	  template : '<div class="yelement" style="width:240px;height:40px;float:left;"><select style="width:100%;height:100%;"><option value="option">选项</option></select></div>'
});

const option = Vue.extend({
	  template : '<option value="option">选项</option>'
});

const button = Vue.extend({
	  template : '<div style="width:85px;height:40px;float:left;" class="yelement"><button type="button" style="width:100%;height:100%;">按钮</button></div>'
});

const textarea = Vue.extend({
	  template : '<div style="float:left;" class="yelement"><textarea  style="width:96%;" rows="2"></textarea></div>'
});

const form = Vue.extend({
	template : '<form style="float:left; width:800px;height:500px;" class="yelementcontainer"></form>'
});

const br = Vue.extend({
	template : '<br class="yelement" style="clear:both"/></br>'
});

const radio = Vue.extend({
	  template : '<div class="yelement" style="float:left;width:25px;height:25px; margin-top:10px;"><input style="width:98%;height:90%;" type="radio" name="radio"></input></div>'
});

const checkbox = Vue.extend({
	  template : '<div class="yelement" style="float:left;width:25px;height:25px; margin-top:10px;"><input style="width:98%;height:90%;" type="checkbox" name="checkbox"></input></div>'
});

const label = Vue.extend({
	template : '<label class="yelement" style="float:left; margin-top: 6px;">label</label>'
});

const fieldset = Vue.extend({
	template : '<fieldset class="yelementcontainer" style="float:left; width:800px;height:500px;"></fieldset>'
});

const ol = Vue.extend({
	template : '<ol style="width:240px;height:300px;float:left;" class="yelementcontainer"></ol>'
});

const table = Vue.extend({
	template : '<table style="width:100%;float:left;" class="yelement"><tr><th>字段1</th><th>字段2</th><th>字段3</th></tr><tr><td style="text-align: center;">内容1</td><td style="text-align: center;">内容2</td><td style="text-align: center;">内容3</td></tr></table>'
});

const tr = Vue.extend({
	  template : '<tr></tr>'
});

const th = Vue.extend({
	  template : '<th>字段</th>'
});

const td = Vue.extend({
	  template : '<td>内容</td>'
});

const object = Vue.extend({
	  template : '<object  width="100" height="50" style="float:left;" class="yelement"></object>'
});

const hr = Vue.extend({
	  template : '<hr class="yelement" style="float:left;width:100%;"></hr>'
});

const img = Vue.extend({
	  template : '<div style="float:left;width:100px;height:100px;" class="yelement"><img style="width:100%;height:100%;"></img></div>'
});

const iframe = Vue.extend({
	template : '<div style="float:left;width:500px;height:500px;" class="yelement"><iframe style="width:100%;height:100%;"></iframe></div>'
});


//component
const elformiteminput = Vue.extend({
	template : '<el-form-item style="float: left; margin: 0px 5px 0px 0px; width: 340px;" label="form item" class="yelementcontainer" v-bind:inline-message="true">'+
				'<el-input v-bind:clearable="true" style="width: 240px; float: left; margin: 0px 5px 0px 0px;" class="yelement" placeholder="请输入内容">'+
				'</el-input></el-form-item>'
});

const elformitemselect = Vue.extend({
	template : '<el-form-item style="float: left; margin: 10px 5px 0px 0px; width: 340px;" label="form item" class="yelementcontainer">'+
		 			'<el-select v-bind:clearable="true" v-bind:filterable="true" style="float: left; margin: 0px 5px 0px 0px;" placeholder="请选择" class="yelement">'+
		 				'<el-option></el-option>'+
		 			'</el-select>'+
		 		'</el-form-item>'
});

const elformitemdate = Vue.extend({
	template : '<el-form-item style="float: left; margin: 0px 5px 0px 0px; width: 340px;" label="form item" class="yelementcontainer">'+
					'<el-date-picker v-bind:clearable="true" type="datetime" style="float: left; margin: 0px 5px 0px 0px;" placeholder="选择日期时间" class="yelement">'+
					'</el-date-picker>'+	
				'</el-form-item>'
});

const elrowcol = Vue.extend({
	template : ''
});

const exportDialog = Vue.extend({
	template :  '<div style="float:left;margin:0px 5px 0px 0px;" class="yelement"><el-button style="width:100%;height:100%;" icon="el-icon-download" type="warning" v-on:click="handleExport">导出</el-button>'+
				'<exportDialog v-bind:title="exportText"'+
				'v-bind:listQuery="listQuery"'+
				'v-bind:mapperCls="mapperCls"'+
				'v-bind:grpName="grpName"'+
				'v-bind:columnIndex="columnIndex"'+
				'v-bind:columnList="columnList"'+
				'v-bind:show.sync="exportBoxVisible"'+ 
				'v-on:closeDialogExport="closeDialogExport">'+
				'</exportDialog>'+
				'</div>'
});

export default
{
  //html-element
  div,
  span,
  ul,
  li,
  h1,
  h2,
  h3,
  h4,
  h5,
  a,
  p,
  i,
  input,
  select,
  option,
  button,
  textarea,
  form,
  br,
  radio,
  checkbox,
  label,
  fieldset,
  ol,
  table,
  tr,
  th,
  td,
  object,
  hr,
  img,
  iframe,
  //global const
  elementSelected,
  elementSelectedParas,
  elementIteraterStack,
  block,
  elementSelectedDom,
  //element-ui container
  elrow,
  elcol,
  elheadermaincontainer,
  elheadermainfootercontainer,
  elasidemaincontainer,
  elheaderasidemaincontainer,
  elheaderasidemainfootercontainer,
  elasideheadermaincontainer,
  elasideheadermainfootercontainer,
  elpagination,
  elcontainer,
  elheader,
  elmain,
  elfooter,
  elaside,
  //element-ui  from
  elradio,
  elradiogroup,
  elradiobutton,
  elcheckbox,
  elcheckboxgroup,
  elcheckboxbutton,
  elinput,
  elautocomplete,
  elinputnumber,
  elselect,
  elcascader,
  eloptiongroup,
  eloption,
  eltimeselect,
  eltimepicker,
  eldatepicker,
  elswitch,
  elupload,
  elcolorpicker,
  eltransfer,
  elformitem,
  elform,
  elformitem,
  elbutton,
  elbuttonprint,
  elicon,
  //element-ui  data
  eltable,
  eltree,
  eltag,
  eltablecolumn,
  elprogress,
  elbadge,

  //element-ui others
  eldialog,
  elcard,
  eltooltip,
  elpopover,
  elcarousel,
  elcarouselitem,
  elcollapse,
  elcollapseitem,
  
  //element-ui notice
  elalert,
  
  //element-ui navigation
  elmenu,
  elsubmenu,
  elmenuitemgroup,
  elmenuitem,
  eltabs,
  eltabpane,
  elbreadcrumb,
  elbreadcrumbitem,
  eldropdown,
  eldropdownmenu,
  eldropdownitem,
  elsteps,
  elstep,
  
  //component
  elformiteminput,
  elformitemselect,
  elformitemdate,
  elrowcol,
  exportDialog
}
